<script lang="ts" setup>
import { computed, ref, watch } from 'vue';
import { DeviceFunctionServiceCommandParam, DeviceServiceDetailResult, DeviceStatusServiceStatusListResult, I, select, slider, switchs } from '../interface';
import { Icategory } from '../../tuyav2/interface';
import { assign } from 'lodash-es';

const p = defineProps<{
    device: DeviceServiceDetailResult, list?: DeviceStatusServiceStatusListResult, commands: (devicelistoption: DeviceFunctionServiceCommandParam) => void, reset: (v: DeviceServiceDetailResult) => void, tuyastate: Icategory[]
    specificationFunction: SpecificationResultFunction[]
    specificationStatus: SpecificationResultStatus[],

}>()


/**
 * 用户配置的状态
 */
const status = computed(() => {
    return p.tuyastate.filter(c => {
        return c.name = p.device.category
    })
})

/**
 * 设备当前状态
 */
const devicestatus = ref(p.list?.status || [])

watch(() => p.list?.status, e => {
    devicestatus.value = p.list?.status || []
})

/**
 * 设置的状态
 */
const setstatus = computed({
    get() {
        return devicestatus.value.map(c => {
            const data = status.value.find(e => e.code === c.code)
            return assign({}, c, data)

        })
    },
    set(v) {
        console.log(v)
        devicestatus.value = v.map(c => {
            return { code: c.code, value: c.value }
        })
    }
})


function commands() {
    const data = devicestatus.value.map(e => {
        return {
            code: e.code,
            value: e.value
        }
    })
    p.commands({ device_id: p.device.id, commands: data })
}


</script>

<template>
    <div class="instruct">
        <div v-for="i in setstatus">
            <div v-if="i.type === 'switchs'" class="instructswitch instruct-item">
                <div class="flex1">{{ i.dataname }}</div>
                <div class="instruct-switch">
                    <el-switch size="large" :disabled="i.disable" v-model="i.value"></el-switch>
                </div>
            </div>
            <div v-else-if="i.type === 'select'" class="instructselect instruct-item">
                <div class="flex1">{{ i.dataname }}</div>
                <div class="instruct-select">
                    <el-select size="large" :disabled="i.disable" v-model="i.value">
                        <el-option v-for="item in i.options" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </div>

            </div>
            <div v-else-if="i.type === 'slider'" class="instructslider instruct-item">
                <div class="flex1">{{ i.dataname }}</div>
                <div class="instruct-slider">
                    <el-slider size="large" width v-model="i.value" :disabled="i.disable" :max="i.max" :min="i.min"
                        :step="i.step" show-input></el-slider>
                </div>
            </div>
        </div>
        <div>
            <ElButton @click="() => p.reset(p.device)">重置</ElButton>
            <ElButton @click="() => commands()">发送指令</ElButton>
        </div>
    </div>
</template>

<style scoped>
.instruct {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 24px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 5px 15px 35px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(60px);
    border-radius: 24px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.instruct-item {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
}

.instruct-slider {
    width: calc(100% - 220px);
    --el-slider-height: 9px;
}

.flex1 {
    flex: 1 0 0%;
}

/* Rectangle 393 */

.instruct-switch {
    box-sizing: border-box;
    width: 240px;
    height: 48px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 48px;
    display: flex;
    align-items: center;
    justify-content: right;
    padding: 9px;
}
</style>

<style>
.el-switch--large .el-switch__core {
    height: 30px !important;
    border-radius: 15px !important;
    min-width: 52px !important;
}

.el-switch--large .el-switch__core .el-switch__action {
    height: 24px !important;
    width: 24px !important;
}
</style>

<style>
.instruct-select .el-input__wrapper {
    --el-input-border-radius: 48px;
}
</style>